<template>
	<view id="form-box" class="form-box">
		<swiper class="mobile-swiper" circular :autoplay="mobileSwiper.autoplay" :vertical="mobileSwiper.vertical"
			:interval="mobileSwiper.interval" :duration="mobileSwiper.duration">
			<swiper-item class="swiper-item" v-for="(item,index) in mobileList" :key="index">
				<text>{{item.mobile}}</text>
				<text>{{item.tip}}</text>
				<text>{{item.time}}</text>
			</swiper-item>

		</swiper>

		<view class="time-download">
			<view class="time-icon-box">
				<image class="icon" mode="widthFix" :src="baseImagePath + 'time-icon.png'"></image>
			</view>
			<view class="title">
				活动即将结束
			</view>
			<view class="time-box">
				<view class="box">{{ timeData.hour }}</view>
				<view class="split">:</view>
				<view class="box">{{ timeData.minute }}</view>
				<view class="split">:</view>
				<view class="box">{{ timeData.second }}</view>
			</view>
		</view>


		<button class="mobile-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</button>

		<!-- <view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</view> -->

		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#ef3d2b" />
			</checkbox-group>
			<view style="text-align: center;">
				<text class="text" @click="agreementChange">
					我已阅读并同意喜马拉雅
				</text>
				<text class="tip-color" @click.stop="showAgreementHandler(1)">《隐私信息保护政策》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(5)">《用户注册协议》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(2)">《会员服务协议》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(3)">《关于客户个人信息收集、使用规则公告》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(4)">《自动续费服务规则》</text>
				<text class="text">
					协议并使用该手机号查询参与资格，符合资格后跳转喜马拉雅继续办理
				</text>

				<view class="tip-text">
					客服热线：400-8825-010
				</view>
			</view>

		</view>
		<!-- 	<view class="tip-text">
			喜马拉雅连续包月联合会员权益（ 首次0.01元）
		</view> -->

		<xmly-agreement v-if="isShowAgreement" @ok="isShowAgreement=false"
			:agreementType="agreementType"></xmly-agreement>
		<xmly-agreement-confirm v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler"
			@cancel="isShowAgreementConfirm = false"
			@showAgreement="agreementConfirmShowAgreementHandler"></xmly-agreement-confirm>
		<xmly-input-mobile v-if="isShowInput" @success="inputSuccess" @close="isShowInput = false"></xmly-input-mobile>
	</view>

</template>

<script>
	import httpUtil from "@/utils/httpUtil.js";
	import validParamsUtil from "@/utils/validParamsUtil.js";
	import messageUtil from "@/utils/messageUtil.js"
	import countDownUtil from "@/utils/countDownUtil.js"
	import deviceUtil from "@/utils/deviceUtil.js";
	import userApi from "@/api/userApi.js"
	import phoneApi from "../../api/phoneApi";
	import ximaLayaShengHeApi from "../../api/ximaLayaShengHeApi";
	import logApi from "../../api/logApi";
	// import wxMiniPayHandler from "@/api/wxMiniPayHandler.js"


	export default {
		data() {
			return {
				formData: {
					mobile: '',
					code: '',
					isAgreement: false,
					isSubmit: false, // 是否已经提交过
					intervalId: '',
				},
				isNeedSendCode: false,
				isShowAgreement: false,
				agreementType: 3,
				sendCodeDownNumber: 0,
				sendCodeText: '获取验证码',
				isShowOrderSuccess: false,
				isShowInput: false,
				isShowAgreementConfirm: false,
				mobileSwiper: {
					autoplay: true,
					interval: 3000,
					duration: 1000,
					vertical: true,
				},
				mobileList: [{
					mobile: '138****4845',
					tip: '0.01元成功领取联合会员',
					time: '一分钟前'
				}, {
					mobile: '181****6012',
					tip: '0.01元成功领取联合会员',
					time: '三分钟前'
				}, {
					mobile: '138****5023',
					tip: '0.01元成功领取联合会员',
					time: '五分钟前'
				}],
				timeData: {
					lastTime: 0,
					hour: 23,
					minute: 59,
					second: 59,
				}
			};
		},
		props: ['btnImg', 'param', 'sutingcheMobile', 'mobile', 'baseImagePath'],
		computed: {

		},
		mounted() {
			console.log('onLoad1')
			this.initShowTimeMethod()
			// if (this.mobile) {
			// 	this.formData.mobile = this.mobile
			// 	inputPhone()
			// 	if (props.isNeedSendCode !== false) {
			// 		this.sendCodeHandler()
			// 	}

			// }
		},
		methods: {
			initShowTimeMethod() {
				let lastTime = new Date();
				lastTime.setHours(23);
				lastTime.setMinutes(59);
				lastTime.setSeconds(59);
				this.timeData.lastTime = lastTime.getTime();
				setInterval(() => {
					this.showTimeMethod();
				}, 1000);
			},
			showTimeMethod() {
				var time_now = new Date(); // 获取当前时间
				time_now = time_now.getTime();
				var time_distance = this.timeData.lastTime - time_now; // 结束时间减去当前时间
				var int_day, int_hour, int_minute, int_second;
				if (time_distance >= 0) {
					// 天时分秒换算
					int_day = Math.floor(time_distance / 86400000)
					time_distance -= int_day * 86400000;
					int_hour = Math.floor(time_distance / 3600000)
					time_distance -= int_hour * 3600000;
					int_minute = Math.floor(time_distance / 60000)
					time_distance -= int_minute * 60000;
					int_second = Math.floor(time_distance / 1000)

					// 时分秒为单数时、前面加零站位
					if (int_hour < 10)
						int_hour = "0" + int_hour;
					if (int_minute < 10)
						int_minute = "0" + int_minute;
					if (int_second < 10)
						int_second = "0" + int_second;

					// 显示时间
					// time_d.innerHTML = int_day;
					this.timeData.hour = int_hour;
					this.timeData.minute = int_minute;
					this.timeData.second = int_second;
				}
			},
			agreementConfirmOkHandler() {
				this.formData.isAgreement = true
				this.submitMethod()
			},
			agreementConfirmShowAgreementHandler(value) {
				this.showAgreementHandler(value)
			},
			inputSuccess(mobile) {
				this.formData.mobile = mobile;
				this.submitMethod()
			},
			getPhoneNumber(e) {

				if (e.detail.code) {
					phoneApi.getWxMiniMobile(e.detail.code, res => {
						this.formData.mobile = res
						this.submitMethod()
					}, err => {
						this.isShowInput = true
					})

				} else {
					console.log('getPhoneNumber')
					this.isShowInput = true
				}
			},
			showAgreementHandler(type) {

				this.agreementType = parseInt(type)
				this.isShowAgreement = true
			},
			inputPhone() {
				if (this.formData.mobile == 11) {
					this.formData.isAgreement = true;
					// getPhoneYunYingMethod()
					// autoSubmit();
					// this.$emit('inputMobile', formData.value.mobile)
				}
			},
			submitMethod() {
				console.log('submitMethod')
				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					messageUtil.showFail('手机号格式不正确')
					return;
				}
				if (this.isNeedSendCode) {
					if (this.formData.code.length < 1) {
						messageUtil.showFail('请输入验证码')
						return;
					}
				}

				if (!this.formData.isAgreement) {
					this.isShowAgreementConfirm = true;
					// messageUtil.showFail('请同意并勾选协议')
					return;
				}

				this.submit()

			},

			submit() {

				let params = {
					a: httpUtil.getA(),
					mobile: this.formData.mobile,
					openid: userApi.getUserId(),
					param: ximaLayaShengHeApi.getParam(),
					type: 1,

				}
				// #ifdef MP-WEIXIN
				params.env = 'mini'
				// #endif
				messageUtil.showLoading()
				logApi.addXmlyLog('提交订单之前，请求参数' + JSON.stringify(params))
				httpUtil.post("/api/xmly/api_order", params, res => {
					messageUtil.closeLoading()
					ximaLayaShengHeApi.setIsSubmit(true)
					ximaLayaShengHeApi.setMobile(this.formData.mobile)
					logApi.addXmlyLog('提交订单之后，请求参数' + JSON.stringify(params) + '。返回：' + JSON.stringify(res))

					let extraData = JSON.parse(res.data.payInfo)
					wx.navigateToMiniProgram({
						appId: 'wxbd687630cd02ce1d',
						extraData,
						success(res) {
							// setInterval(() => {
							// 	ximaLayaShengHeApi.checkOrderIsSuccess(params.mobile,
							// 		res => {
							// 			if (res.data.sign) {
							// 				uni.navigateTo({
							// 					url: '/pages/xmly/xmly'
							// 				})
							// 			}
							// 		})
							// }, 3000)

						},
						fail(res) {

						}
					})


				}, err => {

				})

				// 下面是跳转到二确页面
				// uni.navigateTo({
				// 	url: '/pages/ximaLayaOrderConfirm/ximaLayaOrderConfirm?mobile=' + this.formData.mobile,
				// })
			},
			agreementChange(e) {
				this.formData.isAgreement = !this.formData.isAgreement;
			}
		}

	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	//如果仅仅是<Button />
	button::after {
		border-style: none;
	}

	//如果给Button添加了type=primary属性
	button[type=primary] {
		border-style: none;
	}

	//如果给Button添加了 plain 的属性
	button[plain] {
		border-style: none;
	}

	//如果给Button添加了 type=primary 和 plain
	button[type=primary][plain] {
		border-style: none;
	}

	.form-box {
		padding-top: .1rpx;
		margin-top: -50rpx;
	}

	.mobile-btn {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		animation: butChange 1s infinite;
		box-shadow: none;
		border-style: none;
		margin-top: 20rpx;

		border::after {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			content: none;
			border-style: none;
		}

		.submit-btn {

			width: 90%;
			height: auto;
			display: block;
			margin: 0 auto;
		}

	}

	.title {
		font-size: 2.2rem;
		color: #302c2d;
		font-stretch: normal;
		letter-spacing: .1rem;
		text-align: center;
		font-weight: 600;
		position: relative;


		// >view {
		// 	border-bottom: solid 0.8rem #ffed8b;
		// 	display: inline-block;
		// 	height: 2.1rem;
		// }
	}

	.time {
		text-align: center;
		font-size: 2rem;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: .1rem;
		color: #f9ebcc;
		margin-top: .5rem;
		margin-bottom: 1rem;

		span {
			font-size: 1rem;
		}
	}

	.input-box {
		width: 100%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 76rpx;
		position: relative;


		text {
			font-size: 32rpx;
			letter-spacing: 1rpx;
			color: #323232;
			text-align: left;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			font-family: SourceHanSansCN-Medium;
		}

		.input {
			flex-grow: 1;
			height: 90rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #313131;
			background-color: #ffffff;
			border-radius: 50rpx;
			padding-left: 20rpx;

			.input-placeholder {
				font-size: 36rpx;
				color: #313131 !important;
			}

		}

		.mobile-icon {
			// height: 76rpx;
			width: auto;
			height: 46rpx;
			position: absolute;
			top: 15rpx;
			right: 25rpx;
		}




		.type-list-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.item {
				padding: 9rpx;
				border-radius: 17rpx 12rpx;
				font-size: 26rpx;
				letter-spacing: 1rpx;
				background-color: #efefef;
				border: solid 1rpx #c2c2c2;
				color: #8e8e8e;
				margin-right: 27rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.current {
				background-color: #f0f8fd;
				border: solid 1rpx #94c0ff;
				color: #69a2eb;
			}
		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #fb5f2b;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}

	.clauze {
		width: 100%;
		margin: 24rpx auto 0;
		text-align: left;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;
		align-items: center;
		color: #FFFDFD;

		.text {
			letter-spacing: 2rpx;
			font-size: 22rpx;
			color: #FFFDFD;
		}

		.tip-color {
			color: #FFEFB1;
			font-size: 22rpx;
		}
	}

	.tip-text {
		letter-spacing: 2rpx;
		font-size: 22rpx;
		color: #FFFDFD;
		text-align: center;
		margin-top: 16rpx;
	}


	.submit {
		width: 100%;
		margin: 40rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			animation: butChange 1s infinite;
			width: 100%;
			height: auto;
		}
	}

	.pay-type-icon {
		display: block;
		width: auto;
		width: 100%;
		margin-top: 30rpx;
	}


	.mobile-swiper {
		width: 94%;
		margin: 0 auto 24rpx;
		height: 90rpx;
		background: #FA7063;
		border-radius: 9rpx;
		padding: 24rpx 34rpx;
		box-sizing: border-box;

		.swiper-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFF0CD;

		}
	}

	.time-download {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx auto 42rpx;

		.icon {
			width: 39rpx;
			height: auto;
			display: block;
		}

		.title {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 0 17rpx;

			// >view {
			// 	border-bottom: solid 0.8rem #ffed8b;
			// 	display: inline-block;
			// 	height: 2.1rem;
			// }
		}

		.time-box {

			display: flex;
			align-items: center;

			.box {
				width: 46rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: linear-gradient(0deg, #FAE4A8, #FBF5DD);
				border-radius: 5rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #FA514A;
				text-align: center;
			}

			.split {
				height: 46rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				margin: 0 7rpx;
				display: flex;
				align-items: center;
			}

		}
	}
</style>